// state相当于vue的data，响应式数据
// 只有类组件可以定义自己的state
import React, { Component } from "react";

// state定义在外面是没有响应式的
// const state = {
//   name: "tom",
//   like: "jerry",
// };

class App extends Component {
  // 1. 可以直接在构造函数的构造器里面定义
  // constructor() {
  //   super();
  //   this.state = {
  //     name: "tom",
  //     like: "jerry",
  //   };
  // }

  // 2. 直接声明式定义
  // 不像vue会将变量转成字符串显示
  state = {
    name: "tom",
    like: "jerry",
    show: false,
    obj: {
      a: 3,
      b: 4,
    },
    list: ["tom", "jerry", "cxk"],
  };

  render() {
    // console.log(this);
    const { name, like, show, list } = this.state;
    return (
      <>
        <h2>state的创建和使用</h2>
        <p>name: {name}</p>
        <p>like: {like}</p>

        {/* 可以使用短路或者三目来做类似于v-if的条件渲染 */}
        {show && <p>show</p>}
        {/* {show ? <p>show</p> : null} */}

        {/* 通过style方式可以控制元素的显示和隐藏，类似于v-show */}
        {/* <p style={{ display: show ? "block" : "none" }}>show</p> */}

        {/* 可以使用map映射的方式来做循环渲染 */}
        <ul>
          {list.map((item, index) => (
            <li>
              {item} - {index}
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
